<template>
  <el-dialog 
    :visible="visible" 
    title="销课" 
    width="50%"
    @update:visible="handleVisibleChange"
  >
    <el-form 
      ref="formRef" 
      :model="formData" 
      :rules="rules" 
      label-width="100px"
    >
      <el-form-item label="上课时间" prop="schoolTime">
        <el-date-picker
          v-model="formData.schoolTime"
          type="datetime"
          placeholder="选择上课时间"
          value-format="YYYY-MM-DDTHH:mm:ss"
        />
      </el-form-item>

      <el-form-item label="教师" prop="teacherId">
        <el-select v-model="formData.teacherId" placeholder="选择教师" clearable filterable remote
          :remote-method="queryTeacher">
          <el-option v-for="teacher in teachers" :key="teacher.id" :label="teacher.teacherName" :value="teacher.id" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="课程状态" prop="status" v-if="false">
        <el-select v-model="formData.status" placeholder="请选择状态">
          <el-option label="已销课" value="1" />
          <el-option label="未销课" value="0" />
        </el-select>
      </el-form-item>

      <template v-if="formData.status === '1'">
        <el-form-item label="上课状态" prop="crType">
          <el-select v-model="formData.crType" placeholder="请选择上课状态">
            <el-option label="正常上课" value="1" />
            <el-option label="迟到" value="2" />
            <el-option label="旷课" value="3" />
            <el-option label="请假" value="4" />
            <el-option label="早退" value="5" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="上课内容" prop="content">
          <el-input
            v-model="formData.content"
            type="textarea"
            :rows="3"
            placeholder="请输入上课内容"
          />
        </el-form-item>
        
        <el-form-item label="课后作业" prop="job">
          <el-input
            v-model="formData.job"
            type="textarea"
            :rows="3"
            placeholder="请输入课后作业"
          />
        </el-form-item>
      </template>
    </el-form>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { formatDateTime } from '@/utils/dateUtils'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  course: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['close', 'submit'])

const formRef = ref(null)
const formData = reactive({
  schoolTime: formatDateTime(new Date(), 'YYYY-MM-DDTHH:mm:ss'),
  teacherId: '',
  status: '1',
  crType: '',
  content: '',
  job: ''
})

const teachers = ref([])
import {getTeachers} from '@/api/teacher.js'
const queryTeacher = (query) => {
  console.log(query)
  getTeachers({
    keyword: query,
    page: 1,
    pageSize: 5
  }).then(res => {
    console.log(res)
    teachers.value = res.data.list
  })
}

const rules = {
  schoolTime: [{ required: true, message: '请选择上课时间', trigger: 'blur' }],
  teacherId: [{ required: true, message: '请选择教师', trigger: 'change' }],
  status: [{ required: true, message: '请选择课程状态', trigger: 'change' }],
  crType: [{ required: true, message: '请选择上课状态', trigger: 'change' }],
  content: [{ required: true, message: '请输入上课内容', trigger: 'blur' }],
  job: [{ required: true, message: '请输入课后作业', trigger: 'blur' }]
}

watch(() => props.course, (val) => {
  console.log("========",val)
  if (val) {
    Object.assign(formData, {
      schoolTime: formatDateTime(new Date(), 'YYYY-MM-DDTHH:mm:ss'),
      teacherId: val.teacherId || '',
      status: '1',
      crType: '',
      content: '',
      job: ''
    })
    teachers.value = [{id: val.teacherId, teacherName: val.teacherName}]
  }
}, { immediate: true, deep: true })

const handleVisibleChange = (value) => {
  emit('close')
}

const handleCancel = () => {
  handleVisibleChange(false)
}

const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    emit('submit', { ...formData })
    emit('close')
  } catch (error) {
    ElMessage.error('请填写完整信息')
  }
}
</script>
